2020/02/12 觀看CssCoke大大的Youtube金魚也懂的網也切版，"金魚都能懂的網頁切版 : 超通用橫式版面 NO005"
跟著練習，遇到的問題與不熟悉的地方，為了預防以後忘記而做些筆記。

1.object-fit用法: 用於調整和的大小以適合對應的容器。

object-fit:

• fill:預設，預設會強制變形至 css 所定義的元素寬高，不管原檔比例。

• contain:增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高。

• cover:填滿元素的寬度及高度(維持原比例)，通常會剪掉部分的物件。

• none:不做任何大小及比例調整。

• scale-down:將會選擇設為 none 或 container 兩者間較小的那個物件。

                ** IE無法使用**    
  

2.flex筆記:
(1) display:flex一開始得在父層宣告flex才有用。
(2) flex-direction:改變主軸線方向
raw水平 / raw-reverse逆向水平 / column垂直 / column-reverse逆向垂直
(3) flex-wrap:超出範圍時是否會換行。
nowrap不換行(預設) / wrap換行 / wrap-reverse反向換行
(4) justify-content:主軸線的對齊設定
flex-start/flex-end/center/space-around保持相等距離/space-between貼其左右保持等距
(5) align-items: 交錯軸的對齊設定。
flex-start/flex-end/center/baseline/stretch
(6) flex-shrink:元件的收縮性，預設值為 0，如果設置為 0 則不會縮放。

3.linear-gradient(direction,color1, color2,...):
(1) direction:定義起點和方向(或角度)以及漸變效果。

4.box-shadow陰影用法:
(1) box-shadow: none,h-offset,v-offset,blur,spread,color, |inset|initial|inherit;
Property Values:
none:預設值。
h-offset: 陰影的水平偏移量。
v-offset: 陰影的垂直偏移量。
blur: 模糊度,數字越高陰影越模糊。
spread:模糊半徑,正值增加陰影的大小，負值減小陰影的大小。
color:陰影的顏色。